<template>
	<div class="ye-ji-list full box relative flex-col bg-primary">
		<header-date-range :start="start" :end="end" @chooseDate="handleChooseDate" />
		<div class="w-wrap">
			<div class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<div class="list-wrap">
						<div class="record-item" v-for="(item,index) in list" :key="index">
							<div class="desc-item">
								<span class="desc-label">业绩：</span>
								<span class="desc-value">{{ item.yeji }}</span>
							</div>
							<div class="desc-item">
								<span class="desc-label">日期：</span>
								<span class="desc-value">{{ item.date }}</span>
							</div>
						</div>
					</div>
				</mescroll-uni>
			</div>
		</div>
		<edu-calendar ref="calendarRef" />
	</div>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { request, showLoading, formatDate } from "@/utils/tool.js"
	export default {
		data() {
			const endDate = new Date()
			const startDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1)
			return {
				start: formatDate(startDate),
				end: formatDate(endDate),
				list: [],
				show: false
			}
		},
		mixins: [MescrollMixin],
		methods: {
			handleDateRangeChange(ev) {

			},
			async handleChooseDate() {
				const { start, end } = this
				const [cancel, result] = await this.$refs.calendarRef.open([start, end], { type: "daterange" })
				if (cancel) return
				const [startDate, endDate] = result
				this.start = startDate
				this.end = end
				this.mescroll.triggerDownScroll()
			},
			upCallback(ev) {
				const { num, size } = ev
				this.initData(num, size)
			},
			async initData(page, limit) {
				///api/fangyuan/useryejilists?page_no=1&page_size=10&start_date=2025-06-01&end_date=2025-06-07
				const { start, end } = this
				const resp = await request({
					url: "/fangyuan/useryejilists",
					method: "GET",
					data: {
						page_size: limit,
						page_no: page,
						start_date: start,
						end_date: end
					}
				}).catch(() => {
					hide()
					this.mescroll.endErr()
				})
				const { lists, count } = resp.data
				if (page === 1) this.list = []
				this.list.push(...lists)
				this.mescroll.endBySize(lists.length, count)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ye-ji-list {
		.list-wrap {
			padding: 24rpx 32rpx;
			box-sizing: border-box;

			.record-item {
				background: #fff;
				box-sizing: border-box;
				padding: 24rpx 32rpx;
				border-radius: 16rpx;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.desc-item {
					font-size: 30rpx;
					line-height: 44rpx;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.desc-label {
						color: rgba(0, 0, 0, 0.6);
					}

					.desc-value {
						color: #333333;
					}
				}
			}
		}
	}
</style>